<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.slider {
	background-color: #fff;
	width: 278px;
	height: 285px;
	z-index: 999;
	box-sizing: border-box;
	padding: 9px;
	border-radius: 6px;
	box-shadow: 0 0 11px 0 #999999;
}

.slider .content {
	width: 100%;
	height: 159px;
	position: relative;
}

.bg-img-div, .slider-img-div {
	width: 100%;
	height: 100%;
	position: absolute;
	transform: translate(0px, 0px);
}

.bg-img-div img {
	width: 100%;
}

.slider-img-div img {
	height: 100%;
}

.slider .slider-move {
	height: 60px;
	width: 100%;
	margin: 11px 0;
	position: relative;
}

.slider .bottom {
	height: 19px;
	width: 100%;
}

.refresh-btn, .close-btn, .slider-move-track, .slider-move-btn {
	background: url(https://static.geetest.com/static/ant/sprite.1.2.4.png)
		no-repeat;
}

.refresh-btn, .close-btn {
	display: inline-block;
}

.slider-move .slider-move-track {
	line-height: 38px;
	font-size: 14px;
	text-align: center;
	white-space: nowrap;
	color: #88949d;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.slider {
	user-select: none;
}

.slider-move .slider-move-btn {
	transform: translate(0px, 0px);
	background-position: -5px 11.79625%;
	position: absolute;
	top: -12px;
	left: 0;
	width: 66px;
	height: 66px;
}

.slider-move-btn:hover, .close-btn:hover, .refresh-btn:hover {
	cursor: pointer
}

.bottom .close-btn {
	width: 20px;
	height: 20px;
	background-position: 0 44.86874%;
}

.bottom .refresh-btn {
	width: 20px;
	height: 20px;
	background-position: 0 81.38425%;
}
</style>
</head>
<body>
<div class="slider">
    <div class="content">
        <div class="bg-img-div">
            <img id="bg-img" src="" alt/>
        </div>
        <div class="slider-img-div">
            <img id="slider-img" src="" alt/>
        </div>
    </div>
    <div class="slider-move">
        <div class="slider-move-track">
            拖动滑块完成拼图
        </div>
        <div class="slider-move-btn"></div>
    </div>
    <div class="bottom">
        <div class="close-btn"></div>
        <div class="refresh-btn"></div>
    </div>
</div>

</body>
</html>
<script>
    let start = 0;
    let currentCaptchaId = null;
    let movePercent = 0;
    const bgImgWidth = $(".slider-img-div").width();
    let end = 206;
    $(function () {
        refreshCaptcha();
    })

    $(".slider-move-btn").mousedown((event) => {
        start = event.pageX;
        $(".slider-move-btn").css("background-position", "-5px 31.0092%")
        window.addEventListener("mousemove", move);
        window.addEventListener("mouseup", up);
    });

    function move(event) {
        let moveX = event.pageX - start;
        console.log(moveX)
        if (moveX < 0) {
            moveX = 0;
        } else if (moveX > end) {
            moveX = end;
        }
        // if (moveX > 0 && moveX <= end) {
        $(".slider-move-btn").css("transform", "translate(" + moveX + "px, 0px)")
        $(".slider-img-div").css("transform", "translate(" + moveX + "px, 0px)")
        // }
        movePercent = moveX / bgImgWidth;
    }

    function up(event) {
        console.log(currentCaptchaId, movePercent, bgImgWidth);
        window.removeEventListener("mousemove", move);
        window.removeEventListener("mouseup", up);
        valid();
    }


    $(".close").click(() => {

    });

    $(".refresh-btn").click(() => {
        refreshCaptcha();
    });

    function valid() {
        let data = {
            form: "13333333333",
            id: currentCaptchaId,
            percentage: movePercent
        };
        $.get("/slider/check", {
            id: currentCaptchaId,
            percentage: movePercent
        }, function (res) {
            console.log(res);
            if (res) {
                alert("验证成功!!!");
            }
            refreshCaptcha();
        });
    }

    function refreshCaptcha() {
        $.get("/slider/gen", function (data) {
            reset();
            currentCaptchaId = data.id;
            $("#bg-img").attr("src", data.captcha.backgroundImage);
            $("#slider-img").attr("src", data.captcha.sliderImage);
        })
    }

    function reset() {
        $(".slider-move-btn").css("background-position", "-5px 11.79625%")
        $(".slider-move-btn").css("transform", "translate(0px, 0px)")
        $(".slider-img-div").css("transform", "translate(0px, 0px)")
        start = 0;
        movePercent = 0;
        currentCaptchaId = null;
    }
</script>